.mediaStateIconGroup {
  display: flex;
  padding: 7px 6px;
  width: 100%;
  align-items: center;
}

.placeholder {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    // background-image: url('../../assets/stateHost@2x.png');
  }
}

.roleHost {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/stateHost@2x.png');
  }
}

.shareScreen {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/member-shared-state.png');
  }
}

.shareBoard {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/board-creator-state.png');
  }
}

.interactiveBoard {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/interactive-board-state.png');
  }
}

.muteAudio {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/stateSpeakerOff@2x.png');
  }
}

.unmuteAudio {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/stateSpeakerOn@2x.png');
  }
}


.muteVideo {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/icon_videoOff@2x.png');
  }
}

.unmuteVideo {
  display: flex;
  height: 25px;
  width: 25px;
  cursor: pointer;
  &::after {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
    background-image: url('../../assets/icon_videoOn@2x.png');
  }
}